<template>
    <el-row class="home" :gutter="20">
        <el-col :span="9" style="margin-top: 20px">
            <!-- 管理员信息 -->
            <el-card shadow="hover">
                <div class="user">
                    <img :src="userImg" class="userImg">
                    <div class="userInfo">
                        <p class="name">Admin</p>
                        <p class="access">超级管理员</p>
                    </div>
                </div>
                <div class="loginInfo">
                    <p>上次登录时间：<span>2021-7-19</span> </p>
                </div>
            </el-card>
            <el-card style="margin-top:20px; height:auto">
                <el-table :data="tableData" style="overflow-x:hidden">
                    <el-table-column v-for="(val, key) in tableLabel" :key="key" :prop="key" :label="val">

                    </el-table-column>
                </el-table>
            </el-card>
            <!-- <el-card style="height:260px">
                <div style="height:240px" ref="videoEcharts"></div>
            </el-card> -->
        </el-col>
        <el-col :span="15" style="margin-top:20px">
            <div class="num">
                <el-card v-for="item in countData" :key="item.name" :body-style="{ display: 'flex', padding: 0 }" class="card">
                    <i class="icon" :class="`el-icon-${item.icon}`" :style="{ background: item.color}"></i>
                    <div class="detail">
                        <p class="num">￥{{item.value}}</p>
                        <p class="txt">{{item.name}}</p>
                    </div>
                </el-card>
            </div>
            <el-card style="height:280px">
                <div style="height:280px" ref="echarts">

                </div>
            </el-card>
            <div class="graph">
                <el-card style="height:260px">
                    <div style="height:240px" ref="userEcharts">

                    </div>
                </el-card>
                
            </div>
        </el-col>
    </el-row>
</template>

<script>
import { getData } from '../../../api/commonReq/admin/tag/data.js'
export default ({
    name:'home',
    data() {
        return {
            userImg: require('../../assets/lzq/img/UserImg.jpg'),
            tableData:[
                // {
                //     name:'oppo',
                //     todayBuy:100,
                //     monthBuy:300,
                //     totalBuy:800,
                // },
                // {
                //     name:'vivo',
                //     todayBuy:100,
                //     monthBuy:300,
                //     totalBuy:800,
                // },
                // {
                //     name:'小米',
                //     todayBuy:100,
                //     monthBuy:300,
                //     totalBuy:800,
                // },
                // {
                //     name:'华为',
                //     todayBuy:100,
                //     monthBuy:300,
                //     totalBuy:800,
                // },
                // {
                //     name:'苹果',
                //     todayBuy:100,
                //     monthBuy:400,
                //     totalBuy:500,
                // }
            ],
            tableLabel:{
                name:'课程',
                todayBuy:'今日购买',
                monthBuy:'本月购买',
                totalBuy:'总购买'
            },
            countData:[
                {
                    name:'今日支付订单',
                    value:1234,
                    icon:'success',
                    color:'#2ec7c9'
                },
                {
                    name:'今日收藏订单',
                    value:1234,
                    icon:'star-on',
                    color:'#ffb980'
                },
                {
                    name:'今日未支付订单',
                    value:1234,
                    icon:'s-goods',
                    color:'#5ab1ef'
                },
                {
                    name:'本月支付订单',
                    value:1234,
                    icon:'success',
                    color:'#2ec7c9'
                },
                {
                    name:'本月收藏订单',
                    value:1234,
                    icon:'success',
                    color:'#ffb980'
                },
                {
                    name:'本月未支付订单',
                    value:1234,
                    icon:'success',
                    color:'#5ab1ef'
                },
            ]
        }
    },
    mounted() { 
        getData().then(res => {
            console.log(res);
            // console.log(baseUrl);
            const { code, data} = res.data
            console.log(code);
            console.log(data);
            if( code === 200) {
                this.tableData = data.tableData
                const order = data.orderData
                const xData = order.date
                const keyArray = Object.keys(order.data[0])
                const series = []
                keyArray.forEach(key => {
                    series.push({
                        name:key,
                        data:order.data.map(item => item[key]),
                        type:'line'
                    })
                })
                console.log(series);
                //折线图
                const option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xData
                    },
                    yAxis:{
                        type: 'value'
                    },
                    //每条线代表什么
                    legend: {
                        data: keyArray
                    },
                    series: series
                }
                const E = this.$echarts.init(this.$refs.echarts)
                E.setOption(option)
                //用户图
                const userOption = {
                    legend: {
                        //图例文字颜色
                        textStyle: {
                            color: "#333"
                        },
                    },
                    grid: {
                        left:'20%',
                    },
                    //提示框
                    tooltip: {
                        trigger: "axis",
                    },
                    xAxis:{
                        type:'category',//类目轴
                        data:data.userData.map(item => item.date),

                        axisLine:{
                            lineStyle:{
                                color:"#17b3a3",
                            },
                        },
                        axisLabel:{
                            interval: 0,
                            color:"#333",
                        },
                    },
                    yAxis:[
                        {
                            type:'value',
                            axisLine:{
                                lineStyle:{
                                    color:'#17b3a3',
                                },
                            },
                        },
                    ],
                    color:['#2ec7c9','#b6a2de'],
                    series:[
                        {
                            name:'新增用户',
                            data:data.userData.map(item => item.new),
                            type:'bar'
                        },
                        {
                            name:'活跃用户',
                            data:data.userData.map(item => item.active),
                            type:'bar'
                        }
                    ],
                }
                const U = this.$echarts.init(this.$refs.userEcharts)
                U.setOption(userOption)

                //饼图
                // const videoOption = {
                //     tooltip:{
                //         trigger:"item",
                        
                //     },
                //     color:[
                //         "#0f78f4",
                //         "#dd536b",
                //         "#9462e5",
                //         "#a6a6a6",
                //         "#e1bb22",
                //         "#39c362",
                //         "#3ed1cf"
                //     ],
                //     series:[
                //         {
                //             data: data.videoData,
                //             type:'pie'
                //         }
                //     ]
                // }
                // const V = this.$echarts.init(this.$refs.videoEcharts)
                // V.setOption(videoOption)
            }
        })
    },
})
</script>

<style scoped>
.userImg{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}
.userInfo{
    display: inline-block;
    vertical-align: middle;
    padding-left: 40px;
}
.user{
    padding-bottom: 20px;
    border-bottom: 1px solid #e6e6e6;
}
.loginInfo{
    padding-top: 10px;
    text-align: center;
}
.num{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.card{
    margin: 0 5px 5px 0;
    height: 50px;
    width: 32%;
}
.icon{
    width: 50px;
    text-align: center;
    line-height: 50px;
    color: white;
}
.detail{
    padding-left: 10px;
    padding-top: 6px;
}
.txt{
    font-size: 12px;
}
</style>